<template>
  <div class="mobile-menu-layer fixed left-0 top-[78px] z-[50] w-full overflow-y-auto bg-black">
    <nav class="px-8 text-white">
      <div class="border-b border-b-gray-700 py-4" v-for="(item, index) in menuList" :key="index" @click="onOpen(item)">
        <div class="flex justify-between">
          <div>
            {{ item.title }}
          </div>
          <div
            v-if="item.hasSub"
            :class="item.open ? 'rotate-180' : 'rotate-0'"
            class="transform transition-transform duration-300"
          >
            <arrowDownSvg></arrowDownSvg>
          </div>
        </div>
        <transition name="accordion" v-if="item.hasSub">
          <div v-show="item.open" class="overflow-hidden">
            <div class="py-2">
              <div v-for="item in 20">我是内容</div>
            </div>
          </div>
        </transition>
      </div>
    </nav>

    <div class="my-10 flex justify-center gap-4">
      <appStore></appStore>
      <googlePlay></googlePlay>
    </div>

    <div class="my-10 text-center text-lg text-white">Join the community!</div>
    <div class="flex justify-center gap-6 pb-10">
      <discordSvg></discordSvg>
      <twitterSvg></twitterSvg>
      <InstagramSvg></InstagramSvg>
      <LinkedinSvg></LinkedinSvg>
    </div>
  </div>
</template>

<script setup lang="ts">
import arrowDownSvg from '~/assets/images/svg/arrow-down-svg.vue'
import appStore from '~/assets/images/svg/app-store.vue'
import googlePlay from '~/assets/images/svg/google-play.vue'

import discordSvg from '~/assets/images/svg/discord-svg.vue'
import twitterSvg from '~/assets/images/svg/twitter-svg.vue'
import InstagramSvg from '~/assets/images/svg/Instagram-svg.vue'
import LinkedinSvg from '~/assets/images/svg/Linkedin-svg.vue'

const menuList = ref([
  {
    title: 'Features',
    style: 1,
    hasSub: true
  },
  {
    title: 'Solutions',
    style: 2,
    hasSub: true,
    open: false
  },
  {
    title: 'Resources',
    style: 3,
    hasSub: true,
    open: false
  },
  {
    title: 'For Teams',
    open: false
  },
  {
    title: 'For Developers',
    open: false
  },
  {
    title: 'Contact',
    open: false
  }
])

const onOpen = (item: any) => {
  item.open = !item.open
}
</script>

<style lang="scss" scoped>
.mobile-menu-layer {
  height: calc(100vh - 78px);
}
.accordion-enter-active,
.accordion-leave-active {
  transition: all 0.3s ease;
}
.accordion-enter,
.accordion-leave-to {
  // height: 0;
}
.accordion-enter-to,
.accordion-leave {
  // max-height: 200px;
}

@media screen and (max-width: 375px) {
}
</style>
